<template>
  <div class="new-phone-top-new">
    <el-carousel
      height="230px"
      indicator-position="none"
      v-if="slidesList && slidesList.show == '1'"
    >
      <el-carousel-item v-for="(item, index) in slidesList.banner" :key="index">
        <img
          style="width: 100%"
          :src="$fnc.getImgUrl(item.piclink + '?' + new Date().getTime())"
        />
      </el-carousel-item>
    </el-carousel>

    <div class="new-phone-top-con">
      <div class="fx" v-if="pageObj.tuanzhang == 0" style="margin-bottom: 10px">
        <img
          style="height: 20px"
          :src="pageObj.index_logo"
          v-if="pageObj.index_logo"
        />
        <div v-if="headericon.show == 1">
          <img
            style="width: 20px; height: 20px; margin-left: 10px"
            :src="leftIcon.piclink"
            v-if="leftIcon.piclink"
          />
          <img
            style="width: 20px; height: 20px; margin-left: 10px"
            :src="rightIcon.piclink"
            v-if="rightIcon.piclink"
          />
        </div>
      </div>
      <div class="fx" v-else style="margin-bottom: 10px; font-size: 14px">
        <div class="fx">
          <van-icon name="location" color="#ffffff" size="18" />
          <p style="color: #ffffff; margin-left: 5px">暂无定位</p>
        </div>
        <div v-if="headericon.show == 1">
          <img
            style="width: 20px; height: 20px; margin-left: 10px"
            :src="leftIcon.piclink"
            v-if="leftIcon.piclink"
          />
          <img
            style="width: 20px; height: 20px; margin-left: 10px"
            :src="rightIcon.piclink"
            v-if="rightIcon.piclink"
          />
        </div>
      </div>
      <div class="new-phone-top-search-middle" style="width: 100%; flex: 1">
        <el-input
          size="small"
          readonly
          style="border-radius: 20px"
          prefix-icon="el-icon-search"
          placeholder="输入你想搜索的关键词"
        ></el-input>
      </div>

      <div class="new-phone-top-imags">
        <img
          :src="
            pageObj.background || require('../../../../assets/img/index_kf.png')
          "
          v-if="isShowKf == 1"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      pageObj: (state) => state.modulePage.moduledata,
      slidesList: (state) => state.modulePage.data.slides,
      headericon: (state) => state.modulePage.data.headericon,
    }),
    isShowKf() {
      if (this.pageObj.is_search == "1") {
        return true;
      } else {
        return false;
      }
    },
    leftIcon() {
      try {
        if (this.headericon.banner[0]) {
          return this.headericon.banner[0];
        } else {
          return {};
        }
      } catch {
        return {};
      }
    },
    rightIcon() {
      try {
        if (this.headericon.banner[1]) {
          return this.headericon.banner[1];
        } else {
          return {};
        }
      } catch {
        return {};
      }
    },
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="less">
.new-phone-top-new {
  width: 100%;
  height: 230px;
  position: relative;
  margin-bottom: 10px;

  /deep/.el-carousel__arrow--right,
  /deep/.el-carousel__arrow--left {
    display: none;
  }

  .new-phone-top-con {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: 10px;

    .new-phone-top-imags {
      width: 100%;
      position: absolute;
      bottom: -10px;
      left: 0;

      > img {
        width: 100%;
      }
    }
  }
}
</style>
